<ng-container [formGroup]="passwordForm">
  <div class="password__container">
    <div
      class="password__field"
      *ngIf="passwordForm.contains('currentPassword')">
      <mat-icon
        aria-hidden="false"
        aria-label="User icon"
        class="mr-3 mb-3 password__icon"
        >key
      </mat-icon>
      <mat-form-field class="w-100">
        <mat-label>{{ 'profile.OLD_PASSWORD' | translate }}</mat-label>
        <input
          [type]="isVisible.currentPassword ? 'text' : 'password'"
          formControlName="currentPassword"
          matInput />
        <mat-error
          *ngIf="passwordForm.controls.currentPassword.hasError('required')">
          {{ 'general.REQUIRED' | translate }}
        </mat-error>
      </mat-form-field>
      <button
        (click)="isVisible.currentPassword = !isVisible.currentPassword"
        *ngIf="passwordForm.controls.currentPassword.value"
        aria-label="Visibility icon to toggle password visibility"
        mat-icon-button
        type="button">
        <i class="eos-icons">{{
          isVisible.currentPassword ? 'visibility' : 'visibility_off'
        }}</i>
      </button>
    </div>
    <div class="password__field">
      <mat-icon
        aria-hidden="false"
        aria-label="User icon"
        class="mr-3 mb-3 password__icon"
        >key
      </mat-icon>
      <mat-form-field class="w-100">
        <mat-label>{{ 'profile.PASSWORD' | translate }}</mat-label>
        <input
          [type]="isVisible.newPassword ? 'text' : 'password'"
          formControlName="newPassword"
          matInput />
        <mat-error
          *ngIf="passwordForm.controls.newPassword.hasError('required')">
          {{ 'general.REQUIRED' | translate }}
        </mat-error>
      </mat-form-field>
      <button
        (click)="isVisible.newPassword = !isVisible.newPassword"
        *ngIf="passwordForm.controls.newPassword.value"
        aria-label="Visibility icon to toggle password visibility"
        mat-icon-button
        type="button">
        <i class="eos-icons">{{
          isVisible.newPassword ? 'visibility' : 'visibility_off'
        }}</i>
      </button>
    </div>
    <div
      class="password__field"
      *ngIf="passwordForm.contains('currentPassword')">
      <mat-label>{{ 'profile.PASSWORD_HINT' | translate }}</mat-label>
    </div>
    <div class="password__field">
      <mat-icon
        aria-hidden="false"
        aria-label="User icon"
        class="mr-3 mb-3 password__icon"
        >key
      </mat-icon>
      <mat-form-field class="w-100">
        <mat-label>{{ 'profile.CONFIRM_PASSWORD' | translate }}</mat-label>
        <input type="password" formControlName="confirmPassword" matInput />
        <mat-error
          *ngIf="passwordForm.controls.confirmPassword.hasError('required')">
          {{ 'general.REQUIRED' | translate }}
        </mat-error>
        <mat-error
          *ngIf="passwordForm.controls.confirmPassword.hasError('notSame')">
          {{ 'profile.PASSWORD_ALERT' | translate }}
        </mat-error>
      </mat-form-field>
    </div>
  </div>
  <div class="row" *ngIf="pwdProfile && !isPasswordValid">
    <div class="col-sm-6 password__requirement" *ngIf="pwdProfile.min_len > 0">
      <em
        class="fa"
        [ngClass]="{
          'fa-check text-success-tran': isCharReqValid.isReachingMinLen,
          'fa-times text-danger pl-xs': !isCharReqValid.isReachingMinLen
        }"></em>
      <span
        class="pl-1"
        [ngClass]="{
          'text-light-grey': isCharReqValid.isReachingMinLen,
          'text-dark': !isCharReqValid.isReachingMinLen
        }"
        >{{ reqText.min_len }}</span
      >
    </div>
    <div
      class="col-sm-6 password__requirement"
      *ngIf="pwdProfile.min_uppercase_count > 0">
      <em
        class="fa"
        [ngClass]="{
          'fa-check text-success-tran': isCharReqValid.isReachingMinUpper,
          'fa-times text-danger pl-xs': !isCharReqValid.isReachingMinUpper
        }"></em>
      <span
        class="pl-1"
        [ngClass]="{
          'text-light-grey': isCharReqValid.isReachingMinUpper,
          'text-dark': !isCharReqValid.isReachingMinUpper
        }"
        >{{ reqText.min_uppercase_count }}</span
      >
    </div>
    <div
      class="col-sm-6 password__requirement"
      *ngIf="pwdProfile.min_lowercase_count > 0">
      <em
        class="fa"
        [ngClass]="{
          'fa-check text-success-tran': isCharReqValid.isReachingMinLower,
          'fa-times text-danger pl-xs': !isCharReqValid.isReachingMinLower
        }"></em>
      <span
        class="pl-1"
        [ngClass]="{
          'text-light-grey': isCharReqValid.isReachingMinLower,
          'text-dark': !isCharReqValid.isReachingMinLower
        }"
        >{{ reqText.min_lowercase_count }}</span
      >
    </div>
    <div
      class="col-sm-6 password__requirement"
      *ngIf="pwdProfile.min_digit_count > 0">
      <em
        class="fa"
        [ngClass]="{
          'fa-check text-success-tran': isCharReqValid.isReachingMinDigit,
          'fa-times text-danger pl-xs': !isCharReqValid.isReachingMinDigit
        }"></em>
      <span
        class="pl-1"
        [ngClass]="{
          'text-light-grey': isCharReqValid.isReachingMinDigit,
          'text-dark': !isCharReqValid.isReachingMinDigit
        }"
        >{{ reqText.min_digit_count }}</span
      >
    </div>
    <div
      class="col-sm-6 password__requirement"
      *ngIf="pwdProfile.min_special_count > 0">
      <em
        class="fa"
        [ngClass]="{
          'fa-check text-success-tran': isCharReqValid.isReachingMinSpChar,
          'fa-times text-danger': !isCharReqValid.isReachingMinSpChar
        }"></em>
      <span
        class="pl-1"
        [ngClass]="{
          'text-light-grey': isCharReqValid.isReachingMinSpChar,
          'text-dark': !isCharReqValid.isReachingMinSpChar
        }"
        >{{ reqText.min_special_count }}</span
      >
    </div>
  </div>
</ng-container>
